<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px" size="mini" >
      <el-form-item label="流程key" prop="id" :rules="{ required: true, message: '请输入流程key', trigger: ['blur', 'change'] }">
        <el-input v-model="form.id" @input="updateBaseInfo('id')" clearable></el-input>
      </el-form-item>
      <el-form-item label="流程名称" prop="name" :rules="{ required: true, message: '请输入流程名称', trigger: ['blur', 'change'] }">
        <el-input v-model="form.name" @input="updateBaseInfo('name')" clearable></el-input>
      </el-form-item>
      <el-form-item label="可执行">
        <el-switch v-model="form.isExecutable" :active-value="true" :inactive-value="false" @change="updateBaseInfo('isExecutable')"></el-switch>
      </el-form-item>
      <el-form-item label="流程描述">
        <el-input v-model="form.documentation" type="textarea" @input="updateDocumentation"></el-input>
      </el-form-item>
    </el-form>
    <el-divider />
    <el-form ref="form" :model="form" label-width="110px" size="mini">
      <el-form-item label="流程启动人">
        <el-input v-model="form.candidateStarterUsers" @input="updateBaseInfo('candidateStarterUsers')" clearable></el-input>
      </el-form-item>
      <el-form-item label="流程启动组">
        <el-input v-model="form.candidateStarterGroups" @input="updateBaseInfo('candidateStarterGroups')" clearable></el-input>
      </el-form-item>
      <el-form-item label="首节点为发起节点" label-width="150px">
        <template slot="label">
          <el-tooltip effect="dark" content="启动流程默认跳过第一节点" placement="top">
            <i class="el-icon-question"/>
          </el-tooltip>
          <span> 首节点为发起节点</span>
        </template>
        <el-switch v-model="form.skipFirstNode" :active-value="true" :inactive-value="false" @change="updateBaseInfo('skipFirstNode')"></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "ProcessInfo",
  props: {
    businessObject: Object,
    type: String,
    id: String
  },
  data() {
    return {
      form: {
        skipFirstNode: true
      },
      activeName: "1"
    };
  },
  watch: {
    businessObject: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo());
        }
      }
    }
  },
  methods: {
    resetBaseInfo() {
      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
      this.form = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));

      // 文档描述
      const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
      this.form.documentation = documentations && documentations.length ? documentations[0].text : "";
    },
    updateBaseInfo(key) {
      const attrObj = Object.create(null);
      attrObj[key] = this.form[key];
      if (key === "id") {
        if(this.form[key]){
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            id: this.form[key],
            di: {id: `${this.form[key]}_di`}
          });
        }
      } else {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
      }
    },
    updateDocumentation(){
      (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
      const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.form.documentation });
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        documentation: [documentation]
      });
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>
